<template>
  <div class="manage-page">
    <!-- 页面标题 -->
    <div class="container-box">
      <div class="main-title">项目管理</div>
      <!-- 页面主体 -->
      <div class="main-content">
        <!-- 过滤搜索 -->
        <div class="query-box">
          <el-form
            ref="queryForm"
            inline
            label-position="right"
            label-width="120px"
            :model="queryForm"
            :rules="queryFormRules"
            size="small"
          >
            <el-row>
              <el-form-item label="项目名称">
                <el-input
                  v-model="queryForm.name"
                  maxlength="16"
                  placeholder="请输入项目名称"
                />
              </el-form-item>
              <el-form-item label="项目类别">
                <el-select
                  v-model="queryForm.type"
                  placeholder="请选择项目类别"
                >
                  <el-option label="建设类（新开工）" value="0" />
                  <el-option label="建设类（续建）" value="1" />
                  <el-option label="购买服务类" value="2" />
                  <el-option label="运维类" value="3" />
                  <el-option label="其他" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="投资估算(万元)">
                <div class="number-box">
                  <el-input
                    v-model="queryForm.investmentMin"
                    maxlength="16"
                    placeholder="请输入"
                    class="rule-input"
                    @input="
                    queryForm.investmentMin = queryForm.investmentMin
                      .replace(/[^\d^\.]+/g, '')
                      .replace('.', '$#$')
                      .replace(/\./g, '')
                      .replace('$#$', '.')
                  "
                  />
                  <span>—</span>
                  <el-input
                    v-model="queryForm.investmentMax"
                    maxlength="16"
                    placeholder="请输入"
                    class="rule-input"
                    @input="
                    queryForm.investmentMax = queryForm.investmentMax
                      .replace(/[^\d^\.]+/g, '')
                      .replace('.', '$#$')
                      .replace(/\./g, '')
                      .replace('$#$', '.')
                  "
                  />
                </div>
              </el-form-item>
              <el-form-item label="项目性质">
                <el-select
                  v-model="queryForm.nature"
                  placeholder="请选择项目性质"
                >
                  <el-option label="年度项目" value="0" />
                  <el-option label="增补项目" value="1" />
                  <!-- <el-option
                    v-for="item in exhibitEraList"
                    :key="item.configId"
                    :label="item.configName"
                    :value="item.configId"
                  /> -->
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="项目单位">
                <el-select
                  v-model="queryForm.company"
                  placeholder="请选择项目单位"
                >
                  <el-option
                    v-for="(item, index) in companydata"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="项目状态">
                <el-select
                    v-model="queryForm.isState"
                    placeholder="请选择项目状态"
                >
                  <el-option
                    label="已提交"
                    value="0"
                  />
                  <el-option
                    label="待审核"
                    value="1"
                  />
                  <el-option
                    label="已通过"
                    value="2"
                  />
                  <el-option
                    label="退回修改"
                    value="3"
                  />
                  <el-option
                    label="驳回"
                    value="4"
                  />
                </el-select>
                </el-form-item> -->

              <el-form-item style="margin-left: 20px">
                <el-button
                  type="primary"
                  @click="handleQuery"
                >
                  查询
                </el-button>
                <el-button @click="resetQuery">
                  重置
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="box-content">
        <!-- 列表头部 -->
        <!-- <div class="list-hd">
          <div
            :class="'item' + (listType == 'all' ? ' on' : '')"
            @click="handleListTabChange('all','')"
          >
            全部
          </div>
          <div
            :class="'item' + (listType == 0 ? ' on' : '')"
            @click="handleListTabChange(0,'项目申报')"
          >
            项目申报
          </div>
          <div
            :class="
              'item' +
              (listType === 1 ? ' on' : '') +
              (approveFlag ? ' point' : '')
            "
            @click="handleListTabChange(1,'方案申报')"
          >
            方案申报
          </div>
          <div
            :class="'item' + (listType == 2 ? ' on' : '')"
            @click="handleListTabChange(2,'项目实施')"
          >
            项目实施
          </div>
          <div
            :class="'item' + (listType == 3 ? ' on' : '')"
            @click="handleListTabChange(3,'项目验收')"
          >
            项目验收
          </div>
        </div> -->
        <div class="table-box">
          <!-- 数据表格 -->
          <vxe-table
            ref="table"
            border
            cell-class-name="table-cell"
            class="list-table"
            :data="tableData"
            header-cell-class-name="table-header-cell"
            header-row-class-name="table-header"
            :loading="loading"
            show-header-overflow="ellipsis"
            show-overflow="tooltip"
          >
            <vxe-table-column
              v-for="item in tableColumn"
              :key="item.field"
              v-bind="item"
            />

          <!-- <vxe-table-column width="120"></vxe-table-column> -->
          <vxe-table-column title="操作" width="100">
            <template #default="{ row }">
              <template>
                <el-button
                  class="btn-text"
                  size="small"
                  type="text"
                  v-if="row.isState != 4"
                  @click="handleClick(row.proId)"
                >
                  查看详情
                </el-button>
                <el-button
                  class="btn-text"
                  size="small"
                  type="text"
                  @click="handleDel(row.proId)"
                  v-else
                >
                  删除
                </el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryForm.pageSize"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="删除"
      :visible.sync="showDialog"
      width="628px"
      :before-close="handleClose"
      top="12"
    >
      <div class="del-box">
        <img src="../../assets/images/icon_form_error.png" alt="" />
        是否确定删除 ？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getManageList, getDelete, getApplyCompany } from "@/api/manage/manage";
export default {
  data() {
    return {
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
        // name: "",
        // type: "",
        // investmentMin: "",
        // investmentMax: "",
        // nature: "",
        // company: "",
        // isState: "",
      },
      total: 0,
      loading: false,
      tableData: [],
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn: [
        { type: "seq", width: "60", title: "序号" },
        { field: "name", title: "项目名称", width: "200" },
        { field: "createTime", title: "申报时间", width: "200" }, //全部
        {
          field: "nature",
          title: "项目性质",
          formatter: ({ cellValue }) => {
            return cellValue == 0 ? "年度项目" : "增补项目";
          },
        },
        { field: "company", title: "项目单位" },
        {
          field: "type",
          title: "项目类别",
          formatter: ({ cellValue }) => {
            return cellValue === '0'
              ? "建设类（新开工）"
              : cellValue === '1'
              ? "建设类（续建）"
              : cellValue === '2'
              ? "购买服务类"
              : cellValue === '3'
              ? "运维类"
              : "其他";
          },
        },
        { field: "investmentEstimation", title: "投资估算(万元)" },
      ],
      showDialog: false,
      ruleForm: {},
      delID: "",
      flagType: "", //切换tab的值
      companydata: [],
    };
  },
  created() {
    this.getDataList();
    this.getApplyCompanyList();
  },
  methods: {
    handleQuery() {
      this.getDataList();
    },
    resetQuery() {
      this.queryForm = {
        pageSize: 10,
        pageNum: 1,
      };
      this.getDataList();
    },
    // 列表tab切换
    handleListTabChange(val, text) {
      if (this.listType == val) return;
      this.listType = val;
      // if(val=="all"){
      //    this.queryForm.stag=''
      // }else{
      this.queryForm.stag = text;
      // }
      // if(this.flagType){
      //   this.getDataList(true)
      // }else{
      this.getDataList();
      // }
      // this.resetQuery()
    },
    updateCols(showCols = [], hideCols = []) {
      console.log(this.$refs);
      showCols.forEach((item) => {
        this.$refs.table.showColumn(item);
      });

      hideCols.forEach((item) => {
        this.$refs.table.hideColumn(item);
      });

      this.listData = [];
      this.$refs.table.refreshColumn();
    },
    handleClick(val) {
      this.$router.push({path:"/send_finance/manage/details?id=" + val,query:{name:"name"}});
    },
    getDataList() {
      console.log(this.queryForm);
      let data = JSON.parse(JSON.stringify(this.queryForm));
      getManageList(data).then((res) => {
        console.log(res);
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum = val;
      this.getDataList();
    },
    //删除
    handleDel(id) {
      this.showDialog = true;
      this.delID = id;
    },
    handleClose() {
      this.showDialog = false;
    },
    submitForm() {
      getDelete(this.delID).then((res) => {
        console.log(res);
      });
    },
    //获取项目单位
    getApplyCompanyList() {
      getApplyCompany().then((res) => {
        if (res.code == 200) {
          this.companydata = res.companyList;
        }
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-page {
  width: 100%;
  padding: 16px;
  height: 100%;
  background: #f5f5f5;
  .container-box {
    // width: 1670px;
    background: #fff;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      padding: 24px;
    }
  }
  .box-content {
    background: #fff;
    margin-top: 10px;
    padding-bottom: 40px;
    padding-top: 24px;
    .list-hd {
      width: 1620px;
      margin: 0 auto;
      display: flex;
      padding: 0 24px;
      text-align: center;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      border-bottom: 1px solid #ebecef;
      .item {
        position: relative;
        // width: 90px;
        height: 100%;
        margin: 0 5px;
        cursor: pointer;
        padding: 0 12px;
        &.on:before {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 64px;
          height: 4px;
          // background: $base-logo-background;
        }

        &.point:after {
          content: "";
          position: absolute;
          right: 4px;
          top: 21px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #ea4747;
        }
      }
    }
    .table-box{
      // width:1600px;
      padding: 0 24px;
      .state-span {
        display: flex;
        align-items: center;
        .out-line,
        .out-line2,
        .out-line4 {
          display: inline-block;
          width: 16px;
          height: 16px;
          // opacity: 0.1;
          background: rgba(49, 113, 238, 0.1);
          border-radius: 16px;
          margin-right: 10px;
          span {
            margin: 4px;
            width: 7px;
            height: 7px;
            background: #3171ee;
            border-radius: 16px;
            display: inline-block;
          }
        }
        .out-line2 {
          background: rgba(51, 168, 61, 0.1);
          span {
            background: #33a83d;
          }
        }
        .out-line4 {
          background: rgba(223, 32, 66, 0.1);
          span {
            background: #df2042;
          }
        }
      }
    }
    .el-pagination {
      text-align: center;
      margin-top: 40px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.rule-input {
  border: 0 !important;
}
.on {
  border-bottom: 4px solid #156fed;
}
</style>

<style>
.manage-page .el-form-item .el-input__inner {
  width: 252px;
}
.manage-page .rule-input .el-input__inner {
  border: 0 !important;
  width: 100px !important;
}
.manage-page .vxe-table--render-default .vxe-header--column.col--ellipsis {
  height: 40px !important;
}
</style>
